<!--
功能：导出表格数据
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-12-04 10:52:17
-->
<template>
  <div>
    <a-modal
      v-model:open="visible"
      title="导出表格数据"
      :width="650"
      @ok="handleConfirm"
      @cancel="handleCancel"
    >
      <a-form
        :model="formData"
        ref="formRef"
        :rules="formRule"
        layout="vertical"
        class="form-container"
      >
        <a-row :gutter="10">
          <a-col :span="12">
            <a-form-item label="导出文件名" name="filename" class="form-container-item">
              <a-input v-model:value="formData.filename" placeholder="请输入导出文件名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="导出表名" name="sheetName" class="form-container-item">
              <a-input v-model:value="formData.sheetName" placeholder="请输入导出表名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="导出文件类型" name="type" class="form-container-item">
              <a-select v-model:value="formData.type" placeholder="请选择文件类型">
                <a-select-option value="csv">Csv表格文件（Excel）</a-select-option>
                <a-select-option value="html">Html网页文件</a-select-option>
                <a-select-option value="xml">Xml文件</a-select-option>
                <a-select-option value="txt">Txt文本文件</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="导出文件数据源" name="mode" class="form-container-item">
              <a-select v-model:value="formData.mode" placeholder="请选择导出数据源">
                <a-select-option value="current">当前页数据</a-select-option>
                <a-select-option value="selected">当前页选中数据</a-select-option>
                <a-select-option value="all">全部数据（需服务端支持）</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="导出文件指定列" class="form-container-item">
              <div class="checkbox">
                <div class="checkbox-flex">
                  <a-row :gutter="10">
                    <a-col :span="6">
                      <div class="checkbox-item" style="margin-top: 0px" @click="handleSelectAll">
                        <div class="checkbox-icon">
                          <i
                            class="iconfont fuxuankuang-quanxuan"
                            :style="activeStyles"
                            style="font-size: 20px; margin-right: 4px"
                            v-if="checkAllState == 'entire'"
                          ></i>
                          <i
                            class="iconfont fuxuankuang-weiquanxuan"
                            :style="activeStyles"
                            style="font-size: 20px; margin-right: 4px"
                            v-if="checkAllState == 'sectional'"
                          ></i>
                          <i
                            class="iconfont a-zhengfangxingfuxuankuang"
                            style="font-size: 20px; margin-right: 4px; color: #d9d9d9"
                            v-if="checkAllState == 'none'"
                          ></i>
                        </div>
                        <span>全选/取消全选</span>
                      </div>
                    </a-col>
                    <a-col :span="24">
                      <div class="checkbox-line"></div>
                    </a-col>
                    <template v-for="(item, index) in formData.columns" :key="index">
                      <a-col :span="6" v-if="item.field">
                        <div class="checkbox-item" @click="handleSelectItem(item)">
                          <i
                            class="iconfont fuxuankuang-quanxuan"
                            :style="activeStyles"
                            style="font-size: 20px; margin-right: 4px"
                            v-if="item.export"
                          ></i>
                          <i
                            class="iconfont a-zhengfangxingfuxuankuang"
                            style="font-size: 20px; margin-right: 4px; color: #d9d9d9"
                            v-else
                          ></i>
                          <span>{{ item.title }}</span>
                        </div>
                      </a-col>
                    </template>
                  </a-row>
                </div>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, watch, computed } from 'vue'
import useSettingsStore from '@/store/modules/settings'
//仓库实例化
const settingsStore = useSettingsStore()
const props = defineProps({
  // 配置属性
  modalData: {
    type: Object,
    default: {}
  },
  // 模态框状态
  modalState: {
    type: Boolean,
    default: false
  }
})
// 侧边栏主题
const themeColor = computed(() => {
  return settingsStore.themeColor
})
// 选中样式
const activeStyles = computed(() => {
  return {
    color: themeColor.value
  }
})
// 模态框状态
const visible = ref(props.modalState)
// 对象数组
const formData = reactive({
  filename: '', // 文件名
  sheetName: '', // 表名
  type: 'csv', // 文件类型
  mode: 'current', // 输出数据的方式
  columns: [], // 指定列
  data: [] // 数据
})
// 全选状态
const checkAllState = computed(() => {
  let state = 'none' // entire 全部选中  sectional 部分选中 none 全部未选中
  const originalArr = formData.columns.filter((item) => item.field)
  const filteredArr = formData.columns.filter((item) => item.export && item.field)
  if (filteredArr.length > 0) {
    state = 'sectional'
  }
  if (filteredArr.length === originalArr.length) {
    state = 'entire'
  }
  return state
})
// 表单规则
const formRule = {
  filename: [{ required: true, message: '表单必填项不能为空', trigger: 'blur' }],
  type: [{ required: true, message: '表单必填项不能为空', trigger: 'blur' }],
  mode: [{ required: true, message: '表单必填项不能为空', trigger: 'blur' }]
}
// 选择列
const handleSelectItem = (event) => {
  event.export = !event.export
}
// 全选取消全选
const handleSelectAll = () => {
  if (checkAllState.value === 'entire') {
    formData.columns.forEach((item) => {
      item.export = false
    })
  } else {
    formData.columns.forEach((item) => {
      item.export = true
    })
  }
}
// 派发事件
const emits = defineEmits(['onConfirm', 'onCancel'])
// 确认
const handleConfirm = () => {
  emits('onConfirm', formData)
}
// 取消
const handleCancel = () => {
  emits('onCancel')
}
// 监听数据
watch(
  () => props.modalState,
  (val) => {
    visible.value = val
    for (let key in props.modalData) {
      if (props.modalData[key] !== null && props.modalData[key] !== undefined) {
        formData[key] = props.modalData[key]
      }
    }
  },
  { deep: true, immediate: true }
)
</script>
<style lang="scss" scoped>
.form-container {
  margin-top: 10px;
  &-item {
    margin-bottom: 12px;
  }
}
.checkbox {
  .checkbox-item {
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    border: 1px solid #d9d9d9;
    padding: 0px 10px;
    height: 33px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 4px;
  }
  .checkbox-line {
    height: 1px;
    background-color: #e8eaec;
    margin-top: 10px;
  }
}
</style>
